<template lang="html">
  <section class="section1" v-if='section1'>
    <h1 class="section1-title">
      {{section1[0].floor_name}}
      <i class="icon-right"></i>
    </h1>

    <div class="section1-box">
      <div class="top">
        <div class="main">
          <div style="display: inline-block;">
            <div class="title">优质精选</div>
          </div>
          <router-link :to="section1[0].ad_link">
            <img :src="section1[0].ad_code" alt="">
          </router-link>
        </div>
        <div class="right">
          <div class="top">
            <div style="display: inline-block;">
              <div class="title">优质精选</div>
              <div class="name">{{section1[0].ad_name}}</div>
              <div class="price">¥{{(+section1[0].goods_price).toFixed(2)}}</div>
            </div>
            <img :src="section1[0].ad_code" alt="">
          </div>
          <div class="bottom">
            <div style="display: inline-block;">
              <div class="title">优质精选</div>
              <div class="name">{{section1[1].ad_name}}</div>
              <div class="price">¥{{(+section1[1].goods_price).toFixed(2)}}</div>
            </div>
            <img :src="section1[1].ad_code" alt="">
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { Lazyload } from 'mint-ui';

  export default {
    props:['section1']
  }

</script>

<style lang="less" scoped>
  @import '../../assets/fz.less';
  @import '../../assets/index/style.css';
  .section1 {
    .pt();
    .section1-title {
      height: 10.67vw;
      line-height: 10.67vw;
      margin: 0;
      padding: 0;
      font-size: 4vw;
      font-weight: bold;

      .bt();
      background-color: #ffffff;
      text-align: center;
      padding: 4vw 0;
      .fz(font-size, 40);
      color: #333;
      position: relative;

      i {
        position: absolute;
        right: 6vw;
        top: 50%;
        .fz(font-size, 36);
        .fz(margin-top,-16);

        &::before {
          color: rgb(159, 159, 159);
        }
      }
    }

    .section1-list {
      display: -ms-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      padding:0 2vw 4vw 2vw;
      li {
        width: 50%;
        padding:1vw;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        a,
        img {
          width: 100%;
          display: block;
        }
      }
    }

    .section1-banner {
      display: block;
      width: 100vw;
      img {
        width: 100%;
        height: 24vw;
      }
    }



    .section1-box{
      div, ul, li, span{
        box-sizing: border-box;
      }
      // display: -ms-flex;
      // display: -webkit-box;
      // display: -ms-flexbox;
      // display: flex;
      // -ms-flex-wrap: wrap;
      // flex-wrap: wrap;
      // -ms-flex-pack: distribute;
      // justify-content: space-around;

      // > div{
      //   display: inline-block;
      // }

      a,
      img {
        width: 100%;
      }

      .top{
        >div{
          display: inline-block;
        }

        .main{
          flex: 1;
          flex-shrink: 1;
          vertical-align: top;
          padding-top: 2.1vh;
          padding-left: 4vw;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;

          .title{
            margin-bottom: 12.14vh;
            font-weight: bold;
            font-size: 4vw;
            color: #678EFB;
          }
          .price{
            font-size: 3.73vw;
            color: #F81111;
            margin-bottom: 3.15vh;
          }
          img{
            width: 29.33vw;
            display: inline-block;
            vertical-align: top;
            margin-bottom: 2.02vh;
          }
        }
        .right{
          .top, .bottom{
            .title{
              margin-bottom: 2.67vw;
              font-weight: bold;
              font-size: 3.73vw;
              color: #06B6FF;
            }
            &.bottom .title{
              color: #FEAC1E;
            }

            .name{
              margin-bottom: 2.27vw;
              font-size: 3.4vw;
            }
            .price{
              font-size: 3.73vw;
              color: #F81111;
              margin-bottom: 2.67vw;
            }

            img{
              width: 18.13vw;
              display: inline-block;
              vertical-align: top;
              margin-bottom: 1.6vw;
            }
          }

        }
      }

      ul.bottom{
        display: -ms-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        // -ms-flex-pack: distribute;
        // justify-content: space-around;

        >li{
          &:nth-child(1){
            width: 33.07vw;
            border-right: 0.05vw solid #EEEEEE;

            .left{
              padding: 0.8vw 2vw 0 4vw;

              img{
                width: 12.4vw;
              }

            }
            .right{
              padding: 1.33vw 0.63vw 1.33vw 0;

              .title{
                font-size: 3.2vw;
                margin-bottom: 1.65vh;
              }
              .price{
                font-size: 3.73vw;
              }
            }
          }
          &:nth-child(2){
            width: 34vw;

            .left{
              padding-right: 5.7vw;

              img{
                width: 11.87vw;
              }

            }
            .right{
              padding: 1.33vw 1.33vw 1.6vw 0;

              .title{
                font-size: 3.46vw;
                margin-bottom: 1.5vh;
              }
              .price{
                font-size: 3.73vw;
              }
            }
          }
          &:nth-child(3){

            .left{
              padding-right: 1.8vw;

              img{
                width: 10.93vw;
              }

            }
            .right{
              padding: 1.33vw 4.8vw 1.33vw 0;

              .title{
                font-size: 3.46vw;
                margin-bottom: 2.67vw;
              }
              .price{
                font-size: 3.73vw;
              }
            }
          }

          >div{
            display: inline-block;
          }

          .left{
            vertical-align: top;

            img{

            }

          }
          .right{
            text-align: right;

            .title{

            }
            .price{
              color: #F81111;
            }
          }

        }
      }


    }


  }
</style>
